<template>
    <div class="SearchCardLayout pb-xs">
        <div class="el-card box-card is-always-shadow">
            <div class="header flex-box flex-center el-card__header"
                 onselectstart="return false"
                 @dblclick="show = !show"
            >
                <div class="flex-grow">{{ title }}</div>
                <div class="trans" :class="showButtonClass">
                    <a href="javascript:;" class=""
                       @click="show = !show"
                    >
                        <i class="iconfont icon-chevron-up"></i>
                    </a>
                </div>
            </div>
            <div class="body pl-sm pr-sm pt-xs " v-show="show">
                <slot></slot>
            </div>
            <div class="pl-sm pr-sm pt-xs pb-xs">
                <div class="flex-box flex-center">
                    <div class="flex-grow">
                        <slot name="buttons"></slot>
                    </div>
                    <div class="">
                        <el-button
                                icon="el-icon-search"
                                @click.native="$emit('click-search')"
                                :loading="loading"
                        >查询
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import ElButtonMini from "@/components/common/button/ElButtonMini"
import PaginateModel from "@/project/model/PaginateModel"

@Component({
  components: {
    ElButtonMini
  }
})
export default class SearchCardLayout extends Vue {
  @Prop({
    default: '功能选项'
  })
  readonly title!: any
  @Prop({
    default: false
  })
  readonly loading!: any
  @Prop({
    default() {
      return new PaginateModel()
    }

  })
  readonly paginate!: any
  @Prop({
    default: true
  })
  readonly defaultShow!: any
  show: any = this.defaultShow

  mounted() {
    this.reload()
  }

  reload() {}

  @Watch('show')
  onShowChanged(v) {
    this.$store.dispatch('setSearchShowHidden', v)
  }

  get showButtonClass() {
    return {
      'show': !this.show
    }
  }

}
</script>

<style lang="less" scoped>
    @import (reference) "~style/all.less";

    .SearchCardLayout {
        .show {
            transform: rotateZ(180deg);
        }
    }
</style>